<script setup lang="ts">
import type { InputWidget as InputWidgetType } from '../../types'
import { set } from 'lodash-es'
import defaultConfig from '../../config'
import { ProvideParamsSymbol } from '../../types'
import IconSearch from '../IconSearch.vue'

interface IEmit {
  (e: 'search'): void
}

interface IProps {
  config: InputWidgetType
}

const props = defineProps<IProps>()
const emit = defineEmits<IEmit>()
const params = inject<Ref<Record<string, any>>>(ProvideParamsSymbol)!
const inputRef = ref<HTMLInputElement>()

function onSearch() {
  set(params.value, props.config.field, inputRef.value?.value)
  emit('search')
}

onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <div class="input-widget">
    <span>{{ config?.label }}</span>
    <input
      ref="inputRef"
      type="text"
      :value="params?.[config?.field]"
      :placeholder="config.placeholder || defaultConfig.input.placeholder"
      :maxlength="config.maxLength || defaultConfig.input.maxLength"
      @keydown.enter="onSearch"
    >
    <icon-search @click="onSearch" />
  </div>
</template>

<style scoped lang="less">
.input-widget {
  display: flex;
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  color: #1d2129;
  align-items: center;
  font-size: 12px;
  input {
    width: 160px;
    outline: none;
    margin: 0 8px;
  }
  svg {
    color: #86909c;
    cursor: pointer;
  }
}
</style>
